import React,{Component} from "react";

import "./index.css"

import Headcom from "../../components/header"
import Tip from "../../components/tip"

import {loginUser} from "../../api/user"


class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
        	tipmsg:"",
        	isShow:false,
        	username:"",
        	pass:""
        }
    }

    tipMsg(msg){
        this.setState({
    		tipmsg:msg,
    		isShow:true
    	},()=>{
    		setTimeout(()=>{
    		    this.setState({
    		    	isShow:false
    		    })
    		},2000)
    	})
    }

    loginHanld(){
       let {username,pass} = this.state;
       if(username.trim()===""){
          this.tipMsg("请输入用户名");
          return;
       }

       if(pass.trim()===""){
          this.tipMsg("请输入密码");
          return;
       }

       loginUser({
          username,
          pass
       }).then(res=>{
           this.tipMsg(res.data.msg);
           if(res.data.code==0){
              localStorage.setItem("isLogin","true");
              localStorage.setItem("userinfo",JSON.stringify(res.data.data));
              setTimeout(()=>{
                this.props.history.goBack();
              },2000)
              
           }
       })
    }





	render(){
		let {tipmsg,isShow,username,pass} = this.state;
		return(
            <div className="login">
              <Headcom title="登录"/>
              <div className="form">
                  <p><input type="text"  placeholder="请输入用户名" value={username}
                    onChange={(ev)=>{
                       this.setState({
                          username:ev.target.value
                       })
                    }}/></p>
                  <p><input type="password"  placeholder="请输入密码" value={pass} 
                    onChange={(ev)=>{
                       this.setState({
                          pass:ev.target.value
                       })
                    }}/></p>
                  <span className="btn" onClick={this.loginHanld.bind(this)}>登录</span>
              </div>
              <Tip top={6} tipmsg={tipmsg} isShow={isShow} />
            </div>
		)
	}
}


export default Index